body{
    min-width: 1226px;
}
.w{
    width: 1226px;
    margin: 0 auto;
}
.top-bar{
    height: 40px;
    background-color:RGB(51,51,51);
}
.left-wrapper{
    float: left;
}

.nav a{
    display: block;
    color:RGB(176,176,176);
    text-decoration: none;
    font-size: 12px;
    line-height:40px;
    margin:0 5.5px;
}
.line{
    line-height: 40px;
    color: rgb(63,57,53);
}
.nav-list1 a:hover{
    color: RGB(255,255,255);
}
.nav-list1,.line {
    float: left;
}
.right-wraper{
    float: right;
}
.nav-list2 a{
    margin-left: 10px;
    text-align: center;
    margin-right: 30px;
}
.shopping{
    float: right;
    width: 120px;
    background-color:rgb(66, 66, 66);
}
.shoppingic{
    color: rgb(176,176,172);
    display: block;
    line-height: 40px;
    text-align: center;
    width: 120px;
    height: 40px;
    background-color:rgb(66, 66, 66);
}
.shoppingic:hover{
    color:RGB(255,103,0);
    background-color: rgb(255, 255, 255);
}
li:hover>.downloadapp::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    left: 10px;
    border: 6px solid transparent;
    border-bottom-color: white;
}

.downloadapp{
    position: relative;
}
.appQR{
    position: absolute;
    margin-left: -35px;
    width: 124px;
    height: 0px;
    overflow: hidden;
    font-size: 14px;
    line-height: 3px;
    text-align: center;
    background-color:RGB(255,255,255);
    box-shadow: 0 0 10px RGB(0,0,0,.3);
    transition: height 0.3s;
    z-index: 1;
}
.appQRimg{
    margin:17px 17px;
}
.app:hover .appQR{
    display: block;
    height: 148px;
}
.container-wrapper{
    height: 100px;
    width: 100%;
    position: relative;
}
.container{
    height: 100px;
}
.logo-a{
    display: block;
    float: left;
    width: 56px;
    height: 56px;
    margin-top:22px;
    background-image: url(./source/logo-mi2.png);
}
.container-right{
    height: 100px;
    width: 1126px;
    float: right;

}
.container-right-nav{
    padding-left: 50px;
    margin-top: 10px;
    display: flex;
    flex-wrap: nowrap;
}
.searchform{
    float: right;
    margin-top: 25px;
}

.container-right-nav{
    margin-left:60px;
    float: left;
}
span,a{
    display: block;
    color: rgb(51,51,51);
}
.container-right-list{
    line-height: 88px;
    float: left;
    font-size: 16px;
}
.container-right-list a{
    margin: 0 10px;
}
.all-goods{
    display: none;
}
.search-wrapper{
    width: 296px;
    height: 50px;
    float: right;
    margin-top: 25px;
}

.search-wrapper .search-inp{
    box-sizing: border-box;
    width: 244px;
    border: none;
    float: left;
    padding: 0 10px;
    height: 50px;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    outline: none;
}

/* 设置input获取焦点后的样式 */

.search-wrapper:hover .search-btn,
.search-wrapper:hover .search-inp {
    border-color: #b0b0b0;
}
.search-wrapper .search-inp:focus,
.search-inp:focus+.search-btn{
    border-color: #FF6700;
}
.search-wrapper .search-btn{
    float: left;
    height: 50px;
    width: 52px;
    padding: 0;
    background-color: #fff;
    color: #616161;
    font-size: 16px;
    border: 1px solid rgb(224, 224, 224);
    border-left: none;
}
.search-wrapper .search-btn:hover{
    background-color: #FF6700;
    color: white;
    border: none;
}
.container-right-list span:hover{
    color: RGB(255,106,0);
}
.menu{
    height: 0px;
    width: 100%;
    background-color: white;
    position: absolute;
    top: 100px;
    left: 0;
    overflow: hidden;
    z-index: 1;

    transition: height 0.3s;
}
.menulist{
    height: 230px;
    width: 200px;
}
.menulist,.menulist .line{
    float: left;
}
.menulist .phone{
    margin-top: 45px;
}
.listmenu .line{
    height: 100px;
    width: 0;
    margin-top: 40px ;
    border: 2px solid rgb(224,224,224);
    border-left: none;
}
.menulist a{
    font-size: 12px;
    text-align: center;
}
.menulist .descripe{
    display: block;
    margin-top:20px;
}
.menulist .price{
    margin-top: 8px;
    color: RGB(255,106,0);
}
.menu:hover,.container-right-list:not(:nth-child(9)):not(:nth-child(10)):hover~.menu
{
    height: 230px;
    border:1px solid rgb(224,224,224);
    border-left: none;
    border-right: none;
    box-shadow:0 4px 10px rgb(0,0,0,.2);
}
.all-goods-li{
    position: relative;
}
.all-goods-nav{
    height: 460px;
    width: 234px;
    top: 90px;
    left: -210px;
    z-index: 1;
    position: absolute;
    background: rgba(105,101,101,.5);
}
.all-goods-nav ul{
    margin-top: 20px;
    height: 420px;
    width: 234px;
}
.all-goods-list a{
    line-height: 42px;
    color: white;
    padding-left: 28px;
}
.all-goods-list a>i{
    float: right;
    color: rgb(224,224,224);
    font-size: 20px;
    margin-right: 22px;
    margin-top: 11px;
}
.all-goods-list{
    height: 42px;
}
.all-goods-list:hover{
    background-color: RGB(255,106,0);
}
.all-goods-list a>i:hover{
    color: rgb(255,179,128);
}
.goods-banner{
    height: 460px;
    position: relative;
}
.goods-banner >a{
    background-image:url(../source/goods-banner.png);
    height: 460px;
}
.goods-banner .point{
    height: 20px;
    width: 120px;
    position: absolute;
    z-index: 2;
    bottom: 20px;
    right: 26px;
}
.goods-banner .point li {
    float: left;
    width: 6px;
    height: 6px;
    margin: 0 4px;
    background-color: rgb(0,0,0,.5);
    border: 2px solid rgb(255,255,255,.5);
    border-radius: 50%;
}
.goods-banner .point li:hover{
    background-color: rgb(255,255,255,.5);
    border-color:rgb(0,0,0,.5);
}
.fix-banner{
    width: 84px;
    height: 456px;
    position: fixed;
    bottom: 64px;
    right: 0;
}
.tool-right{
    width: 83px;
    height: 91px;
    border-top: 1px solid rgb(245,245,245);
    background-color: white;
}
.tool-right a {
    width: 100%;
    height: 100%;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
}
.tr1{
    background-image: url("../source/downloadr1.png");
}
.tr2{
    background-image: url("../source/person1.png");
}
.tr3{
    background-image: url("../source/set1.png");
}
.tr4{
    background-image: url("../source/earphone1.png");
}
.tr5{
    background-image: url("../source/cart1.png");
}
.tr1:hover{
    background-image: url("../source/downloadr.png");
}
.tr2:hover{
    background-image: url("../source/person.png");
}
.tr3:hover{
    background-image: url("../source/set.png");
}
.tr4:hover{
    background-image: url("../source/earphone.png");
}
.tr5:hover{
    background-image: url("../source/cart.png");
}
@media (max-width:1300px) {
    .fix-banner{
        width: 27px;
        height: 210px;
        right: 0;
        z-index: 99;
    }
    .tool-right{
        width: 27px;
        height: 42px;
    }
    .tool-right>span{
        display: none;
    }
}
@media (min-width:1300px) and (max-width:1430px) {
    .fix-banner{
        width: 27px;
        height: 260px;
        right: 50%;
        margin-right:-639px;
    }
    .tool-right{
        width: 27px;
        height: 42px;
    }
    .tool-right>span{
        display: none;
    }
}
@media (min-width:1430px){
    .tool-right{
        position: relative;
    }
    .tool-right a {
        width: 100%;
        height: 100%;
        background-size: 30px 36px;
        background-repeat: no-repeat;
        background-position: center 18px;
    }
    .tool-right>span{
        position: absolute;
        bottom:0;
        font-size: 16px;
        color: rgb(153,153,153);
        margin-bottom: 10px;
        margin-left: 10px;
    }
    .tool-right:nth-child(5) span{
        margin-left: 22px;
    }
    .tool-right a:hover,.tool-right a:hover+span{
        color: RGB(255,106,0);
    }
}
